<template>
  <div class="box">
    <div class="slid">
      <slide-verify
        slider-text="向右滑动"
        @success="onSuccess"
        @fail="onFail"
        @refresh="onRefresh"
        :imgs="img"
      ></slide-verify>
      <div>{{ msg }}</div>
    </div>
    <div>当前功能是通过vue-monoplasty-slide-verify插件完成的</div>
    <div>下载插件后需要再main.js文件中 导入使用</div>
    <div>import SlideVerify from 'vue-monoplasty-slide-verify'</div>
    <div>Vue.use(SlideVerify)</div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: '',
      // img就是随机切换的图片
      img: [
        'https://2426328536-1316373723.cos.ap-guangzhou.myqcloud.com/%20%2810%29.jpg',
        'https://2426328536-1316373723.cos.ap-guangzhou.myqcloud.com/%20%2822%29.jpg',
        'https://2426328536-1316373723.cos.ap-guangzhou.myqcloud.com/%20%2827%29.jpg'
      ]
    }
  },
  methods: {
    onSuccess (times) {
      this.msg = '验证成功-- 耗时' + times + '秒'
    },
    onFail () {
      this.msg = '验证不通过'
    },
    onRefresh () {
      console.log('点击了刷新')
      this.msg = ''
    }
  }
}
</script>

<style lang="scss" scoped>
.box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.slid {
  background-color: blueviolet;
}
</style>
